<template>
  <div id="footer-left">
    <!-- 上一首 -->
    <span class="prev">
      <i class="iconfont icon-shangyishou"></i>
    </span>
    <!-- 播放或暂停 -->
    <span
      class="play-or-stop"
      @click="playOrStop">
      <i :class="{
          'el-icon-caret-right': !$store.getters.isPlay,
          'icon-zanting': $store.getters.isPlay,
          'iconfont': $store.getters.isPlay
        }"></i>
    </span>
    <!-- 下一首 -->
    <span class="next">
      <i class="iconfont icon-xiayishou"></i>
    </span>
  </div>
</template>

<script>
import types from 'utils/types.js'
import { _setInterval } from 'utils'

export default {
  name: 'FooterLeft',
  computed: {
    isPlay () {
      return this.$store.getters.isPlay
    }
  },
  methods: {
    playOrStop () {
      if (!this.$store.state.playInfo.songData) return false
      // 有歌曲在播放的时候接下来处理
      this.$store.commit(types.PLAY_OR_STOP, Math.floor(this.$audio.currentTime))
      // 视全局状态管理的isPlay来判断播放还是暂停
      // if (this.$store.getters.isPlay) {
      //   this.$audio.play()
      //   _setInterval(() => { this.$store.commit(types.ADD_TIMER) }, 1000, this.$timerId)
      // } else {
      //   this.$audio.pause()
      //   clearTimeout(this.$timerId)
      // }
      // 停止计时器运行
    }
  },
  watch: {
    isPlay () {
      // if (this.$timerId.length) return false
      // 视全局状态管理的isPlay来判断播放还是暂停
      if (this.isPlay) {
        this.$audio.play()
        _setInterval(() => { this.$store.commit(types.ADD_TIMER) }, 1000, this.$timerId)
      } else {
        this.$audio.pause()
        clearTimeout(this.$timerId)
      }
    }
  }
}
</script>

<style scoped lang="less">
#footer-left {
  // width: var(--aside--width);
  display: flex;
  align-items: center;
  padding-left: 6px;
  span {
    color: #fff;
    border-radius: 50%;
    background-color: #e83c3c;
    position: relative;
    transition: all 300ms;
    cursor: pointer;
    i {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    &.prev, &.next {
      i {
        font-size: 20px;
      }
      margin-left: 26px;
      width: 32px;
      height: 32px;
    }
    &.play-or-stop {
      i {
        font-size: 28px;
        &.icon-zanting {
          font-size: 20px;
        }
      }
      margin-left: 26px;
      width: 38px;
      height: 38px;
    }
    &:hover {
      background-color: #d33030;
    }
  }
}
</style>
